<template>
	<view>
		<view class="bg padding">
			<view>
				<view class="cuIcon cuIcon-back text-white" @tap="goBack"></view>
			</view>
			<view class="con padding relative" style="margin-top: 330rpx;">
				<view class="absolute rightbbn">
					<view class="lqbtn" @tap="goPage('/pages/member/gift/logs')">领取记录</view>
					<view class="edbtn margin-top-sm" @tap="goPage('/pages/member/gift/quota')">我的额度</view>
				</view>
				<view class="text-red text-bold text-center text-xl margin">今日红包</view>
				<view class="text-center margin-top" v-if="my">
					<view class="margin-tb-xl text-red text-lg text-bold">
						<text class=" text-xxxxl  ">{{my.num}}</text>元
					</view>
				</view>
				<view class="text-center margin-top" v-else>
					<block v-if="detail && detail.num > 0 && (detail.num-detail.take_num)>0">
						<view class="getbtn" @tap="getRed">立即领取</view>
					</block>
					<block v-else>
						<view class="getbtn2">暂无红包</view>
					</block>
				</view>
				<view class="flex space-between text-center margin-top" style="color: rgba(142, 94, 71, 1);">
					<view>
						<view>今日红包总额</view>
						<view class="margin-top-sm">{{detail?detail.total:'-'}}</view>
					</view>
					<view>
						<view>今日红包数量</view>
						<view class="margin-top-sm">{{detail?detail.num:'-'}}</view>
					</view>
					<view>
						<view>剩余红包数量</view>
						<view class="margin-top-sm">{{detail?(detail.num-detail.take_num):'-'}}</view>
					</view>
				</view>
				<view class="margin-top text-bold text-center text-lg" style="color: rgba(142, 94, 71, 1);">个人额度</view>
				<view>
					<view class="cu-progress round margin-top sm">
						<view class="" :style="[{ width:quota?quota.bili+'%':'',backgroundColor:'rgba(248, 66, 80, 1)'}]"></view>
					</view>
					<view class="flex space-between margin-top-sm">
						<view class="text-left">
							<view>已领取</view>
							<view class="text-price text-red margin-top-xs">{{quota?quota.take:'-'}}</view>
						</view>
						<view class="text-right">
							<view>剩余</view>
							<view class="text-price text-red margin-top-xs">{{quota?quota.sy:'-'}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="con padding margin-top-xl">
				<view class="text-red text-bold text-center text-xl margin">今日领取记录</view>
				<view class="text-center" style="color: rgba(142, 94, 71, 1);">已有{{detail?detail.take_num:'-'}}人领取</view>
				<view class="margin">
					<scroll-view style="height: 500rpx;" scroll-y="true">
						<view class="flex space-between align-center margin-bottom overflow w100" v-for="(item,index) in logs" :key="index">
							<view class="cu-avatar lg round default-bg">
								<image :src="item.member.head_portrait"></image>
							</view>
							<view class="w100">
								<view class="margin-left-sm" style="color: rgba(142, 94, 71, 1);">
									<view class="text-bold">{{item.member.nickname?item.member.nickname:item.member.realname}}</view>
									<view class="margin-top-xs">{{$common.timeFormat(item.created_at)}}</view>
								</view>
							</view>
							<view class="text-red" style="min-width: 120rpx;width: 120rpx;">+{{item.num}}元</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="con padding margin-top-xl">
				<view class="text-red text-bold text-center text-xl margin">活动介绍</view>
				<view style="height: 500rpx; overflow: auto;">
					<rich-text :nodes="red.desc" v-if="red"></rich-text>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='Image'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" style="background-color: unset;" @tap.stop="">
				<view class="takebg padding relative" style="width: 300px; margin: 0 auto;">
					<image src="@/static/takebg.png" mode="widthFix" class="w100"></image>
					<view class="absolute w100 padding-xl" style="top: 0; left: 0;">
						<view class="text-xl margin-top-xl text-center padding-top">恭喜获得红包</view>
						<view class="text-gray margin-top">每日红包</view>
						<view class="text-xxxxl text-red text-bold margin-top-xl">{{my?my.num:'-'}}元</view>
					</view>
					<view class="absolute w100 padding-xl" style="bottom: 20px; left: 0;">
						<view class="margin-xl">
							<view class="cu-btn lg bg-gradual-yellow radius w100" @tap="modalName=''">完成</view>
						</view>
					</view>
				</view>
				<view class="cuIcon cuIcon-roundclose text-white lg" @tap="modalName=''"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				member: null,
				loading: false,
				detail: null,
				logs: [],
				red: null,
				quota: null,
				modalName: '',
				my: null,
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
				})
			}

			this.getInfo()
			setTimeout(() => {
				this.loading = true
			}, 500)
		},
		methods: {
			getInfo() {
				this.$http
					.get('red_enveloper_info')
					.then((response) => {
						this.detail = response.data.data.detail
						this.logs = response.data.data.log
						this.red = response.data.data.red
						this.quota = response.data.data.quota
						this.my = response.data.data.my
					}).catch((r) => {
						uni.hideLoading()
					})
			},
			getRed() {
				uni.showLoading({
					title: '处理中...'
				})
				this.$http
					.post('red_enveloper_create')
					.then((response) => {
						uni.hideLoading()
						this.modalName = 'Image'
						this.my = response.data.data
						this.getInfo()
					}).catch((r) => {
						uni.hideLoading()
					})
			},
			goBack() {
				uni.navigateBack({

				})
			}
		}
	}
</script>

<style>
	.bg {
		background-color: #f73854;
		background-image: url(../../../static/red_bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		min-height: 100vh;
	}

	.con {
		background-image: url(../../../static/box_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.getbtn2 {
		background-image: url(../../../static/get-gold-bg2.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		color: #FFFFFF;
		font-weight: bold;
	}

	.getbtn {
		background-image: url(../../../static/get-gold-bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		color: #FFFFFF;
		font-weight: bold;
	}

	.takebg {}

	.text-xxxxl {
		font-size: 45px;
	}

	.rightbbn {
		right: 10rpx;
		top: 140rpx;
	}

	.lqbtn {
		border: 1px solid rgba(214, 189, 144, 1);
		padding: 8rpx 20rpx;
		border-radius: 30rpx 0 0 30rpx;
		color: rgba(184, 136, 112, 1);
	}

	.edbtn {
		background-color: rgba(244, 234, 214, 1);
		border: 1px solid rgba(244, 234, 214, 1);
		padding: 8rpx 20rpx;
		border-radius: 30rpx 0 0 30rpx;
		color: rgba(142, 94, 71, 1);
	}
</style>
